<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="box-header">
        <el-page-header @back="goBack" content="用户详情页面"> </el-page-header>
      </div>
      <div>
        <el-descriptions :title="userinfo.name" direction="vertical" border>
          <el-descriptions-item label="用户名"
            >{{userinfo.username}} </el-descriptions-item
          >
          <el-descriptions-item label="手机号"
            >{{userinfo.phone}}</el-descriptions-item
          >
          <el-descriptions-item label="居住地">{{userinfo.address}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <el-tag size="small">{{userinfo.email}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址"
            >{{userinfo.address}}</el-descriptions-item
          >
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      userinfo: {},
    };
  },
  created() {
    this.id = this.$route.query.id; //获取路径参数
    this.query();
  },
  methods: {
    query() {
      fetch("http://47.241.102.141:3000/users?id=" + this.id)
        .then((response) => response.json())
        .then((data) => {
          this.userinfo = data[0];
        });
    },

    goBack() {
            this.$router.replace({path:"/dashboard/users"})

    },
  },
};
</script>
<style scoped>
.box-header {
  display: flex;
  justify-content: space-between;
}
</style>